<template>
  <div>
    <el-card>
      <div class="head">
        <div>
          <el-button type="primary" @click=addAdmin>添加管理员</el-button>
        </div>
        <el-form :inline="true" :model="searchForm">
          <el-form-item label="管理员名称:">
            <el-input v-model="searchForm.name" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="Search">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
          :data="AdminList" border
          style="width: 100%">
        <el-table-column
            label="编号"
            prop="id"
            width="180">
        </el-table-column>
        <el-table-column
            label="姓名"
            prop="name"
            width="180">
        </el-table-column>
        <el-table-column
            label="性别"
            prop="gender">
        </el-table-column>
        <el-table-column
            label="邮箱"
            prop="email">
        </el-table-column>
        <el-table-column
            label="账号"
            prop="account">
        </el-table-column>
        <el-table-column
            label="家庭住址"
            prop="location">
        </el-table-column>
        <el-table-column
            label="身份证号"
            prop="carId">
        </el-table-column>
        <el-table-column
            label="手机号码"
            prop="phone">
        </el-table-column>
        <el-table-column
            label="是否冻结"
            prop="isFreeze">
          <template v-slot="scope">
            <el-tag v-if="scope.row.isFreeze==false" type="success">未冻结</el-tag>
            <el-tag v-else type="danger">已冻结</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280">
          <template v-slot="scope">
            <el-button v-if="scope.row.isFreeze==false" size="small" style="width: 80px;height: 32px;" type="warning"
                       @click="frozen(scope.row)">冻结
            </el-button>
            <el-button v-else size="small" type="success" @click="frozen(scope.row)">取消冻结</el-button>
            <el-button size="small" type="danger" @click="dele(scope.row)">删除</el-button>
            <el-button size="small" type="primary" @click="distribution(scope.row)">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="ADDdialog" title="添加管理员" width="40%" @close="ADDdialogClose">
        <el-form ref="ruleForm" :inline="true" :model="addadmin" :rules="rules" label-width="80px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model.trim="addadmin.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="addadmin.sex" placeholder="请选择">
              <el-option :value="1" label="男"></el-option>
              <el-option :value="0" label="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model.trim="addadmin.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="账号" prop="account">
            <el-input v-model.trim="addadmin.account" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model.trim="addadmin.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="家庭住址">
            <el-input v-model.trim="addadmin.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input v-model.trim="addadmin.IDcard" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机号码">
            <el-input v-model.trim="addadmin.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="是否冻结">
            <el-select v-model="addadmin.freeze" placeholder="请选择">
              <el-option :value="1" label="冻结"></el-option>
              <el-option :value="0" label="不冻结"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="ADDdialog = false">取 消</el-button>
          <el-button type="primary" @click="Personsub">确 定</el-button>
        </div>
      </el-dialog>

      <el-drawer
          :visible.sync="drawer"
          title="权限管理"
          @close="drawerClose"
      >
        <el-form :model="formLabelAlign" label-width="80px" style="width: 400px;">
          <el-form-item label="账号">
            <el-input v-model="formLabelAlign.account"></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
        </el-form>

        <Tree style="margin-left: 25px;"  :data="data4" @on-check-change="check" show-checkbox multiple></Tree>
        <el-button style="margin-left: 25px;"   type="primary" @click="save" class="sure">确定</el-button>

      </el-drawer>
      <div class="block" style="margin-top: 20px;">
        <el-pagination
            :current-page="pagenum"
            :page-size="pagesize"
            :total="total"
            layout="total, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Admin",
  data(){
    return {
      data4: [
        {
          title: '宣传管理',
          expand: true,
          checked: true,
          children: [
            {
              title: '图片管理',
              expand: true,
            },
          ]
        },
        {
          title: '线索管理',
          expand: true,
          children: [
            {
              title: '待受理',
              expand: true,
              checked: true,
            },
            {
              title: '审查中',
              expand: true,
            },
          ]
        },
        {
          title: '微信人员管理',
          expand: true,
          children: [
            {
              title: '个人基本信息',
              disabled: true,
              expand: true,
            },
            // {
            //   title: '权限管理',
            //   disabled: true,
            //   expand: true,
            // },
            {
              title: '平台管理员管理',
              expand: true,
            },
          ]
        },
        {
          title: '故障上报管理',
          expand: true,
        },
        {
          title: '绩效考评',
          expand: true,
        },
        {
          title: '平台日志',
          expand: true,
        }
      ],
      pagesize:7,
      pagenum:1,
      total: 0,
      formLabelAlign: {
        account: "",
        name: ""
      },
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      drawer: false,
      rules: {
        name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
        ],
        account:[
          { required: true, message: '账号不能为空', trigger: 'blur' },
        ]
      },
      ADDdialog:false,
      addadmin:{
        name:'',
        sex:'',
        email:'',
        account:'',
        password:'',
        address:'',
        IDcard:'',
        phone:'',
        freeze:'',
      },
      searchForm:{//查找表单
        name:''
      },
      AdminList:[
        {
          id:0,
          name:'周凯尖',
          sex:'男',
          email:'3068472478@qq.com',
          account:'kkwudi',
          password:'123456',
          address:'柳州',
          IDcard:'455646464654856',
          phone:'17386282871',
          frozen:0
        },
        {
          id:0,
          name:'周凯尖',
          sex:'男',
          email:'3068472478@qq.com',
          account:'kkwudi',
          password:'123456',
          address:'柳州',
          IDcard:'455646464654856',
          phone:'17386282871',
          frozen:1
        }
      ]
    }
  },
  created() {
    this.getAlladminList();

  },
  methods:{
    check() {
      console.log(this.data4)
    },
    //保存权限
    save() {


    },
    handleSizeChange(val) {
      this.pagesize=val
     this.getAlladminList()
    },
    handleCurrentChange(val) {
      this.pagenum=val
      this.getAlladminList()
      console.log(`当前页: ${val}`);
    },
    drawerClose() {
      this.drawer=false
    },
    distribution(row) {
      this.formLabelAlign.account=row.account
      this.formLabelAlign.name=row.name

      this.drawer = true;
    },
    getAlladminList() {
      this.$axios({
        method: 'post',
        url: '/api/web/admin/listData',
        params:{
          curPage: this.pagenum,
          pageSize: this.pagesize,
        }

      }).then(res=>{
        console.log(res.data);
         this.AdminList=res.data.data;
         this.total=res.data.count;
      })
    },
    //添加弹窗关闭回调
    ADDdialogClose() {
      this.addadmin=
      {
        name:'',
            sex:'',
          email:'',
          account:'',
          password:'',
          address:'',
          IDcard:'',
          phone:'',
          freeze:'',
      }
      },
    Personsub() {
      console.log(this.addadmin)
      if (this.addadmin.sex == 1) {
        this.addadmin.sex = '男'
      } else if (this.addadmin.sex == 0) {
        this.addadmin.sex = '女'
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$axios({
            method: 'post',
            url: '/api/web/admin/add',
            params: {
              name:this.addadmin.name,
              account: this.addadmin.account,
              password: this.addadmin.password,
              location: this.addadmin.address,
              email: this.addadmin.email,
              carId: this.addadmin.IDcard,
              phone: this.addadmin.phone,
              gender: this.addadmin.sex,
              isFreeze: this.addadmin.freeze
            },
          }).then(res => {
            console.log(res)
            if (res.data.code == 1) {
              this.$message.success(res.data.msg);
              this.getAlladminList()
              this.ADDdialog = false;
            } else if (res.data.code == 0) {
              this.$message.error(res.data.msg);
            } else {
              this.$message.error('添加失败');
            }
          });
        } else {
          this.$message.error('请输入完整信息')
        }
      });


    },
    addAdmin() {
      this.addadmin.freeze=0
  this.ADDdialog=true
    },
    Search() {

    },
    //删除
    dele(row){
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
          .then(()=>{
            this.$axios({
              method: 'post',
              url:'/api/web/admin/delete',
              headers: {
                'Content-type': 'application/json',
              },
              params:{
                adminId:row.id
              }
            }).then((res)=>{
              console.log(res)
              if(res.data.code==1){
                this.$message.success("删除成功")
                this.getAlladminList()
              }else {
                this.$message.error("网络错误")
              }
            }).catch((err)=>{
              this.$message.error(err)
            })
          })
          .catch(()=>{
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          })

    },
    frozen(row){
      //false表示
      if(row.isFreeze==false){
     this.$axios({
       method: 'post',
       url: '/api/web/admin/freezeAdmin',
       params: {
         adminId:row.id
       }
     }).then((res)=>{
       if (res.data.code==1){
         this.$message.success("操作成功")
         this.getAlladminList()
       }
     })
      }else if (row.isFreeze==true) {
        this.$axios({
          method: 'post',
          url: '/api/web/admin/unfreezeAdmin',
          params: {
            adminId:row.id
          }
        }).then((res)=>{

          if (res.data.code==1){
            this.$message.success("操作成功")
            this.getAlladminList()
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.head{
  display: flex;
  justify-content: space-between;
  align-content: center;
}

.head:nth-child(1){
  margin-right: 200px;
}

.head .el-input {
  width: 270px;
}
</style>
